// asyncImportComp.js
import React, { useState, useEffect } from 'react'

const asyncImportComponent = function (importComp) {
  function AsyncComponent(props) {
    const [Comp, setComp] = useState(null)
    useEffect(() => {
      let isUnmounted = false;
      const fetchComponent = async() => {
        try {

          const { default: importComponent } = await importComp();
          console.log(importComponent);
          if (!isUnmounted){
            setComp(() => importComponent)
          }
        } catch (e) {
          console.log(e);
          throw new Error('加载组件出错')
        }
      }

      fetchComponent();
      return () => {
        isUnmounted = true;
      }
    }, [])
    return (
      Comp ? <Comp {...props} /> : <div>加载中...</div>
    )
  }
  return AsyncComponent
}

export default asyncImportComponent
